<template>
  <div class="match-container">
    <div class="filter-container">
      <el-form :inline="true" class="filter-form">
        <el-form-item label="赛事状态">
          <el-select v-model="filter.status" placeholder="全部状态" clearable>
            <el-option label="未开始" value="SCHEDULED"></el-option>
            <el-option label="进行中" value="ONGOING"></el-option>
            <el-option label="已结束" value="FINISHED"></el-option>
            <el-option label="已取消" value="CANCELLED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="球队">
          <el-select v-model="filter.teamId" placeholder="选择球队" clearable>
            <el-option 
              v-for="team in teams" 
              :key="team.id" 
              :label="team.name" 
              :value="team.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter" icon="el-icon-search">搜索</el-button>
          <el-button @click="resetFilter" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="match-list">
      <el-card v-for="match in matches" :key="match.id" class="match-card">
        <div class="match-header">
          <span class="match-date">{{ formatDate(match.matchTime) }}</span>
          <el-tag :type="getStatusType(match.status)">{{ getStatusText(match.status) }}</el-tag>
        </div>
        <div class="match-content">
          <div class="team-info home-team">
            <img :src="`http://localhost:8088/api/file/get/${match.homeTeamLogo}`" class="team-logo">
            <div class="team-name">{{ match.homeTeamName }}</div>
          </div>
          <div class="match-vs">
            <div class="vs-text">VS</div>
            <div class="match-time">{{ formatTime(match.matchTime) }}</div>
          </div>
          <div class="team-info away-team">
            <img :src="`http://localhost:8088/api/file/get/${match.awayTeamLogo}`" class="team-logo">
            <div class="team-name">{{ match.awayTeamName }}</div>
          </div>
        </div>
        <div class="match-footer">
          <div class="venue-info">
            <i class="el-icon-location"></i>
            <span>{{ match.venueName }}</span>
          </div>
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="small" 
              icon="el-icon-view"
              @click="viewMatchDetail(match.id)">
              查看详情
            </el-button>
            <el-button 
              type="warning" 
              size="small" 
              icon="el-icon-shopping-cart-2"
              @click="buyTicket(match.id)"
              :disabled="match.status !== 'SCHEDULED'">
              购票
            </el-button>
          </div>
        </div>
      </el-card>
      
      <div v-if="matches.length === 0" class="no-data">
        暂无比赛数据
      </div>
    </div>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import moment from 'moment'

export default {
  name: 'MatchList',
  data() {
    return {
      matches: [],
      teams: [],
      venues: [],
      filter: {
        status: '',
        teamId: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchTeams()
    this.fetchVenues()
    this.fetchMatches()
  },
  methods: {
    async fetchMatches() {
      try {
        const res = await request({
          url: '/api/matches/list',
          method: 'get',
          params: {
            status: this.filter.status,
            teamId: this.filter.teamId,
            page: this.currentPage,
            size: this.pageSize
          }
        })
        this.matches = res.data.records
        this.total = res.data.total
      } catch (error) {
        console.error('获取比赛列表失败', error)
      }
    },
    async fetchTeams() {
      try {
        const res = await request({
          url: '/api/teams/list',
          method: 'get',
          params: { size: 100 }
        })
        this.teams = res.data.records
      } catch (error) {
        console.error('获取球队列表失败', error)
      }
    },
    async fetchVenues() {
      try {
        const res = await request({
          url: '/api/venues/list',
          method: 'get'
        })
        this.venues = res.data
      } catch (error) {
        console.error('获取场馆列表失败', error)
      }
    },
    handleFilter() {
      this.currentPage = 1
      this.fetchMatches()
    },
    resetFilter() {
      this.filter = {
        status: '',
        teamId: ''
      }
      this.handleFilter()
    },
    handlePageChange() {
      this.fetchMatches()
    },
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD')
    },
    formatTime(dateStr) {
      return moment(dateStr).format('HH:mm')
    },
    getStatusText(status) {
      const statusMap = {
        'SCHEDULED': '未开始',
        'ONGOING': '进行中',
        'FINISHED': '已结束',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    getStatusType(status) {
      const typeMap = {
        'SCHEDULED': 'warning',
        'ONGOING': 'success',
        'FINISHED': 'info',
        'CANCELLED': 'danger'
      }
      return typeMap[status] || ''
    },
    getTeamName(teamId) {
      const team = this.teams.find(t => t.id === teamId)
      return team ? team.name : '未知球队'
    },
    getTeamLogo(teamId) {
      const team = this.teams.find(t => t.id === teamId)
      if (team && team.logoUrl) {
        return `http://localhost:8088/api/file/get/${team.logoUrl}`
      }
      return require('@/assets/default-team.png')
    },
    getVenueName(venueId) {
      const venue = this.venues.find(v => v.id === venueId)
      return venue ? venue.name : '未知场馆'
    },
    buyTicket(matchId) {
      this.$router.push(`/tickets/${matchId}`)
    },
    viewMatchDetail(matchId) {
      this.$router.push(`/matches/${matchId}`)
    }
  }
}
</script>

<style scoped>
.match-container {
  padding: 20px;
}

.banner {
  background: linear-gradient(135deg, #1e88e5, #0d47a1);
  color: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.banner p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.filter-container {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.match-list {
  margin-bottom: 20px;
}

.match-card {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.match-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.match-date {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}

.match-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
}

.team-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 50%;
  padding: 5px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.team-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.match-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.vs-text {
  font-size: 24px;
  font-weight: bold;
  color: #ff9800;
  margin-bottom: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.match-time {
  font-size: 14px;
  color: #909399;
}

.match-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.venue-info {
  display: flex;
  align-items: center;
  color: #606266;
}

.venue-info i {
  margin-right: 5px;
  color: #ff9800;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #909399;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 